<template>
    <div class="modified-data">
        <div class="liuhai"></div>
        <div class="md-header">
            <div>
                <i class="settings-icon" @click="goTo('/mine')">&#xe600;</i>
            </div>
            <div>修改资料</div>
            <div></div>
        </div>
        <form action="">
            <div class="basic-information">
                <div class="BI-listHead">
                    <img :src="userInfo.avatar" alt="">
                    <label for="fileImg" id="Controls" @click="uploadHeadImg">换个头像</label>
                    <input type="file" accept="image/*" @change="handleFile" capture="camera" id="fileImg"
                           style="display: none">
                </div>
                <div class="BI-list binding-list">
                    <label for="">昵称</label>
                    <div class="click-pop-up">
                        <input type="text" value="没有重名的大笛子">
                    </div>
                    <i class="settings-icon">&#xe634;</i>
                </div>
                <div class="BI-list binding-list">
                    <label for="">性别</label>
                    <van-popup v-model="show" position="bottom">
                        <van-picker
                                v-model="show"
                                show-toolbar
                                title="标题"
                                :columns="sex"
                                @cancel="onCancel"
                                @confirm="onConfirmSex"
                        />
                    </van-popup>
                    <div @click="showPopup" class="click-pop-up">
                        <input type="text" :value="this.sexSelect" disabled>
                    </div>
                    <i class="settings-icon">&#xe634;</i>
                </div>
                <div class="BI-list binding-list">
                    <label for="">年龄</label>
                    <div class="click-pop-up">
                        <input type="text" value="21" >
                    </div>
                    <i class="settings-icon">&#xe634;</i>
                </div>
                <div class="BI-list binding-list">
                    <label for="">城市</label>
                    <van-popup v-model="show2"  position="bottom">
                        <van-area :area-list="areaList" :columns-num="2" title="选择城市" @confirm="onConfirm" @cancel="onCancel"/>
                    </van-popup>
                    <div @click="showPopup2" class="click-pop-up">
                        <input type="text" :value="this.userrigion" disabled >
                    </div>
                    <i class="settings-icon">&#xe634;</i>
                </div>
                <!--.....-->
                <div style="height: 20px;"></div>
                <div class="binding-list">
                    <label for="">绑定手机</label>
                    <div class="click-pop-up">
                        <input type="text" value="159XXXXXXXX" disabled>
                    </div>
                    <i class="settings-icon">&#xe634;</i>
                </div>
                <div class="binding-list">
                    <label for="">绑定邮箱</label>
                    <div class="click-pop-up">
                        <input type="text" value="未绑定" disabled>
                    </div>
                    <i class="settings-icon">&#xe634;</i>
                </div>
                <div class="binding-list">
                    <label for="">绑定QQ</label>
                    <div class="click-pop-up">
                        <input type="text" value="未绑定" disabled>
                    </div>
                    <i class="settings-icon">&#xe634;</i>
                </div>
                <div class="binding-list">
                    <label for="">身份认证</label>
                    <div class="click-pop-up">
                        <input type="text" value="未绑定" disabled>
                    </div>
                    <i class="settings-icon">&#xe634;</i>
                </div>
            </div>
            <button type="submit" class="save-changes">保存修改</button>
        </form>
    </div>
</template>

<script>
    import AreaList from './area';

    import { AddressEdit } from 'vant';

    export default {
        props: ['editValue'],
        components: {
            [AddressEdit.name]: AddressEdit
        },
        data() {
            return {
                // 初始图片
                userInfo: {
                    avatar: 'http://img3.imgtn.bdimg.com/it/u=1912113785,1587702892&fm=26&gp=0.jpg'
                },
                show: false,
                show2: false,
                sex:["男","女"],
                areaList:AreaList,    // 指定数据源
                searchResult: [],
                userrigion:"",
                sexSelect:"男"
            };
        }
        ,
        methods: {
            goTo(path) {
                this.$router.replace(path)
            }
            ,
            // 打开图片上传
            uploadHeadImg() {
                this.$el.querySelector('.hiddenInput').click()
            }
            ,
            // 将头像显示
            handleFile(e) {
                let $target = e.target || e.srcElement
                let file = $target.files[0]
                var reader = new FileReader()
                reader.onload = (data) => {
                    let res = data.target || data.srcElement
                    this.userInfo.avatar = res.result
                }
                reader.readAsDataURL(file)
            },
            showPopup() {
                this.show = true;
            },
            showPopup2() {
                this.show2 = true;
            },
            onConfirmSex(e){
                this.show = false;
                console.log(e);
                this.sexSelect = e;
            },
            onConfirm(e){
                this.show2 = false;
                console.log(e);
                this.regiondata = e;
                this.userrigion = this.regiondata[0].name+"-"+this.regiondata[1].name;
                console.log(this.userrigion)
            },
            onCancel(){
                this.show = false;
                this.show2 = false;
            }


        },
    }
</script>

<style>
    .modified-data {
        background-color: #eeeeee;
        height: 100vh;
        overflow: hidden;
    }

    /********************************************字体图标************************************/
    .settings-icon {
        font-family: iconfont;
        font-size: 36px;
        font-style: normal;
    }

    .liuhai {
        height: 50px;
        width: 100%;
        background-color: white;
    }

    .md-header {
        width: 100%;
        height: 96px;
        display: flex;
        flex-direction: row;
        background-color: white;
        margin-bottom: 20px;
    }

    .md-header > div {
        width: 20%;
        height: 80px;
    }

    .md-header > div:nth-child(2) {
        width: 60%;
        font-size: 36px;
        color: #44444a;
        text-align: center;
        line-height: 80px;
    }

    .md-header > div:nth-child(1) {
        display: flex;
        align-items: center;
    }

    .md-header > div:nth-child(1) > i {
        margin-left: 16px;
    }

    .BI-listHead {
        width: 100%;
        height: 126px;
        box-sizing: border-box;
        border-bottom: 2px solid #eee;
        background: white;
    }

    .BI-listHead {
        line-height: 126px;
        position: relative;
    }

    .BI-listHead > * {
        position: absolute;
    }

    .BI-listHead > img {
        width: 96px;
        height: 96px;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
    }

    .BI-listHead > label {
        right: 20px;
        color: #666666;
    }

    .binding-list {
        width: 100%;
        height: 96px;
        box-sizing: border-box;
        border-bottom: 2px solid #eee;
        background: white;
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 96px;
    }

    .BI-list > i {
        color: white;
    }

    .binding-list {

    }

    .binding-list > label {
        width: 150px;
        height: 96px;
        font-size: 24px;
        color: #666;
        text-align: left;
        text-indent: 16px;
    }

    .binding-list > .click-pop-up {
        width: 600px;
    }

    .binding-list input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 28px;
    }

    .binding-list > .van-cell {
        width: 600px;
        height: 100%;
        padding: 0;
        position: relative;
    }

    .binding-list > .van-cell > div {
        position: absolute !important;
        background: rebeccapurple;

    }

    .binding-list input[disabled] {
        background: white;
    }

    .save-changes {
        display: block;
        width: 100%;
        height: 96px;
        background: #e8a41c;
        border: none;
        outline: none;
        margin: 16px auto;
        color: white;
        letter-spacing: 5px;
    }
    .van-picker__toolbar{
        height: 60px !important;
    }
    .van-picker__cancel, .van-picker__confirm{
        font-size: 24px !important;
    }
    .van-picker-column__item{
        font-size: 24px;
    }
</style>
